<template>
	<div>
		<view class="bg"></view>
		<view class="container">
			<div class="ibox mb10">
				<goodsItem type="pay" v-for="(i, idx) in list" :key="i" :info="i" @update="getCar"/>
			</div>
			<div class="ibox mb10">
				<div>提货方式</div>
				<div class="flex">
					<div :class="['ff', deliveryType == 1 ? 'cur' : '']" @click="deliveryType = 1">自取</div>
					<div :class="['ff', deliveryType == 2 ? 'cur' : '']" @click="deliveryType = 2">配送</div>
				</div>
			</div>
			<div class="ibox mb10">
				<div class="mb10">手机号</div>
				<uni-easyinput type="number" v-model="phone" placeholder="请输入手机号" />
			</div>
			<div class="ibox mb10" v-if="deliveryType == 2">
				<div>配送地址</div>
				<textarea v-model="addr" placeholder="请输入详细地址"
					style="width: 100%; box-sizing: border-box; height: 4rem; padding: 10rpx; margin-top: 10px; border: 1px solid #eee; border-radius: 4px;"></textarea>
			</div>
			<div class="ibox" style="margin-bottom: 40px;">
				<div class="mb10">支付方式</div>
				<div class="flexB mb10">
					<div><uni-icons style="margin-right: 10px;" color="#FF8A00" type="wallet-filled" size="20"></uni-icons> 账户支付<span class="f12 theme">余额：¥{{ balance }}</span>
					</div>
					<radio :checked="pay == 1" color="#007aff" @click="pay = 1" />
				</div>
				<div class="flexB">
					<div><uni-icons style="margin-right: 10px;" color="#09BB07" type="weixin" size="20"></uni-icons> 微信支付</div>
					<radio :checked="pay == 2" color="#007aff" @click="pay = 2" />
				</div>
			</div>
		</view>
		<div class="flexB sub ac">
			<div class="tt f18"><span style="font-size: 12px;">实付</span>¥{{ price }}</div>
			<div class="btn" @click="submit">提交订单</div>
		</div>
	</div>
</template>

<script>
import goodsItem from "@/components/goodsItem";

export default {
	components: { goodsItem },
	data() {
		return {
			phone: '',
			addr: '',
			deliveryType: 1,
			page: 1,
			pay: 1,
			no: '',
			balance: 0,
			isOrder: 0,
			list: []
		}
	},
	onLoad(p) {
		this.isOrder = p.isOrder;
		this.list = uni.getStorageSync('carArr');
		this.phone = uni.getStorageSync('phone') || '';
		this.$request({
			url: '/wx/user/getUseInfo',
			method: 'get',
		}).then(res => {
			this.balance = res.data.balance || 0;
		})
	},
	computed: {
		total() {
			let n = 0;
			this.list.map(i => n += i.num);
			return n;
		},
		price() {
			let n = 0;
			this.list.map(i => n += ((i.sellingPrice || i.price) * i.num));
			return n;
		}
	},
	methods: {
		submit() {
			if (this.pay == 1 && this.balance<this.total) return this.$msg('余额不足');
			const regex = /^1[3-9]\d{9}$/;
			if (!this.phone) return this.$msg('请输入手机号');
			if (!regex.test(this.phone)) return this.$msg('手机号格式错误');
			if (this.deliveryType == 2 && !this.addr) return this.$msg('请输入配送地址');
			uni.setStorageSync('phone', this.phone);
			if(this.isOrder==1) {
				this.no = this.list.find(i=>i.pickupNo).pickupNo;
				if (this.pay == 1) this.pay1();
				if (this.pay == 2) this.pay2();
			} else {
				this.$request({
					url: '/order/subProductOrder',
					data: {
						productList: this.list,
						shippingAddress: this.addr,
						deliveryType: this.deliveryType,
						phone: this.phone
					}
				}).then(res => {
					this.no = res.data.pickupNo;
					if (this.pay == 1) this.pay1();
					if (this.pay == 2) this.pay2();
				})
			}
		},
		goDetail() {
			if(this.isOrder == 1) return uni.navigateBack();
			uni.redirectTo({
				url: `/pages/orderDetail?no=${this.no}&type=2`
			});
		},
		pay1() {
			this.$request({
				url: '/wxpay/balancePay',
				method: 'get',
				data: {
					pickNo: this.no
				}
			}).then(res => {
				this.goDetail();
			})
		},
		pay2() {
			this.$request({
				url: '/wxpay/unifiedOrder',
				method: 'get',
				data: {
					pickNo: this.no
				}
			}).then(res => {
				let obj = res.data.jsConfig;
				uni.requestPayment({
					provider: 'wxpay',
					package: obj.packageValue,
					timeStamp: obj.timeStamp,
					nonceStr: obj.nonceStr,
					signType: obj.signType,
					paySign: obj.paySign,
					success: (res2) => {
						console.log('success:' + JSON.stringify(res2));
						this.goDetail();
					},
					fail: (err)=> {
						this.$msg('未支付');
						console.log('fail:' + JSON.stringify(err));
					}
				});
			})
		},

		getCar() {
			this.$request({
				url: '/carts/cartsList',
				method: 'get',
			}).then(res => {
				this.list = res.data.map(i => ({ ...i, checked: false }));
				this.checkedAll = false;
			})
		}
	}
}
</script>

<style lang="scss">
.bg {
	width: 100%;
	position: absolute;
	top: 0;
	height: 40vh;
	background: $theme;
	border-radius: 0 0 20px 20px;
	z-index: -1;
}

.ff {
	width: 60px;
	height: 40px;
	margin: 10px 10px 0 0;
	text-align: center;
	line-height: 40px;
	border-radius: 10px;
	background: #999;
}

.cur {
	background: $theme;
}

.sub {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99;
	box-sizing: border-box;
	height: 100px;
	padding: 0 20px 40px;
	background: #fff;
	border-top: 1px solid #eee;
}

.tt {
	color: red;
}

.btn {
	text-align: center;
	width: 100px;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: $theme;
	color: #fff;
}
</style>